<!-- 自定义标准图表 设置百分百宽度 通过平台组件来适配尺寸 可以替换数据以及设置高级属性自定义扩展 详细查看组件示例.txt
  注:如需设置图片存放文件夹名称需应与当前文件名一致(1并在aircim.webpack.build.component.config.js配置需要打包的文件 2.npm run lib_c 执行打包命令  最后的组件会打包在components/grids中)-->
<template>
  <div class="scale-box" :id="dynamicIdName()">
    <div
      class="hall-role-panel animate__animated"
      :class="dynamicClassName"
      :style="backgroundStyle"
      style="width: 460px;height: 323px;"
      :id="dynamicChildName()"
    >
      <h1 class="h1_title">
        <span>办事群体</span>
        <div class="h1_tab">
          <span :class="{ active: tabIndex == 0 }" @click="changeTab(0)"
            >对象类型</span
          >
          <span :class="{ active: tabIndex == 1 }" @click="changeTab(1)"
            >对象区域</span
          >
        </div>
      </h1>

      <div class="grid-box-bd" v-show="tabIndex == 0">
        <div class="chart_wrap">
          <div
            class="grid-charts"
            ref="chartsRef"
            @click="clickFn()"
            @dblclick="dblclickFn()"
            @mouseenter="mouseenterFn()"
            @mouseleave="mouseleaveFn()"
          ></div>
        </div>
        <div class="chart_wrap">
          <div
            class="grid-charts"
            ref="chartsRef_fr"
            @click="clickFn()"
            @dblclick="dblclickFn()"
            @mouseenter="mouseenterFn()"
            @mouseleave="mouseleaveFn()"
          ></div>
        </div>
      </div>
      <div class="grid-box-bd" v-if="tabIndex == 1">
        <div class="common-table">
          <p class="table-name">
            <span class="table-index">序号</span>
            <span class="table-flex">对象区域</span>
            <span class="table-1-4">事项数</span>
            <span class="table-1-4">占比</span>
          </p>
          <TableScroll :container-height="160" :speed="10">
            <ul class="table-bd">
              <li class="table-bd-item">
                <span class="table-index">01</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">02</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">03</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">04</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">05</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">05</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">05</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
              <li class="table-bd-item">
                <span class="table-index">05</span>
                <span class="table-flex">区域名称</span>
                <div class="table-1-4">
                  <p class="num"><em>2340</em>件</p>
                </div>
                <span class="table-1-4">
                  <p class="num"><em>2340</em>%</p>
                </span>
              </li>
            </ul>
          </TableScroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TableScroll from "./TableScroll.vue";
//引入echarts图表
import echarts from "echarts";
// 封装方法
import encapsulation from "../../utils/aircimGird";
export default {
  //混入封装方法
  mixins: [encapsulation],
  components: { TableScroll },
  grid_specification: "aircim_grid_1x1",

  data() {
    return {
      tabIndex: 0,
      //图表数据
      echartdata: {
        name: "个人事项",
        value: 100,
        total: 500,
      },
      echartdata_fr: {
        name: "法人事项",
        value: 30,
        total: 500,
      },
      //图表样式
      echartsConfigData: {
        //标题样式
        textStyle: {
          color: "#fff",
          fontSize: 32,
        },
        // 图表底板颜色
        linerColor: "rgba(255,255,255,0)",
        // 是否隐藏底框
        hideBottomFrame: false,
      },
      //监听尺寸变化
      resizeObserver: null,
      //图表实例
      mychart: null,
      mychart_fr: null,
      colors: [
        ["rgba(0, 247, 222,.1)", "rgba(0, 247, 222,1)"],
        ["rgba(255, 201, 6, .1)", "rgba(255, 201, 6, 1)"],
      ],
      timestamp: null,
    };
  },
  methods: {
    myEcharts(index) {
      let that = this;
      let chart;
      let data;
      let colors;
      if (index == 1) {
        that.mychart_fr = echarts.init(that.$refs.chartsRef_fr);
        chart = that.mychart_fr;
        data = that.echartdata_fr;
        colors = that.colors[1];
      } else {
        that.mychart = echarts.init(that.$refs.chartsRef);
        chart = that.mychart;
        data = that.echartdata;
        colors = that.colors[0];
      }

      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "内部进度条",
            type: "gauge",
            center: ["50%", "45%"],
            radius: "95%",
            startAngle: 210,
            endAngle: -30,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    this.echartdata.value / 100,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: colors[0],
                      },
                      {
                        offset: 1,
                        color: colors[1],
                      },
                    ]),
                  ],
                ],
                width: 10,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              formatter: function(params) {
                return (
                  "{b|" +
                  data.total +
                  "}" +
                  "{unit|" +
                  "个" +
                  "}\n" +
                  "{c|" +
                  data.value +
                  "}" +
                  "{a|%}"
                );
              },
              offsetCenter: [0, "54%"],
              rich: {
                a: {
                  fontSize: 16,
                  color: "#96BEE0",
                  padding: [-5, 0, 0, 2],
                },
                b: {
                  fontSize: 26,
                  color: colors[1],
                  fontFamily: "ys",
                  padding: [36, 0, 0, 0],
                },
                unit: {
                  fontSize: 14,
                  padding: [30, 0, 0, 8],
                  color: "#96BEE0",
                },
                c: {
                  fontSize: 22,
                  fontFamily: "D-DIN",
                  color: colors[1],
                },
              },
            },
            title: {
              //标题
              show: true,
              offsetCenter: [0, -10], // x, y，单位px
              textStyle: {
                color: "#fff",
                fontSize: 18, //表盘上的标题文字大小
              },
            },
            data: [data],
            pointer: {
              show: false,
            },
            itemStyle: {
              color: "#fff",
            },
            animationDuration: 4000,
          },
        ],
      };
      chart.setOption(option);
      chart.resize();
    },
    // 刷新数据源方法
    refreshData(val) {
      this.echartdata = val.echartdata;
    },
    // 初始化方法
    initGrid() {
      let that = this;
      that.$nextTick(() => {
        that.myEcharts(0);
        that.myEcharts(1);
      });
    },
    // 样式修改
    refreshConfig(val) {
      const { labelWeight, textStyle, linerColor, hideBottomFrame } = val;

      this.echartsConfigData.labelWeight = labelWeight;
      this.echartsConfigData.textStyle = textStyle;
      this.echartsConfigData.linerColor = linerColor;
      this.echartsConfigData.hideBottomFrame = hideBottomFrame;
    },

    changeTab(index) {
      this.tabIndex = index;
      this.myEcharts(0);
      this.myEcharts(1);
    },
    //监听外部盒子的大小 然后对数据井行缩放
    scaleFn() {
      const parentBox = document.getElementById(`dynamic-${this.timestamp}`);
      const childBox = document.getElementById(
        `dynamicChild-${this.timestamp}`
      );
      const parentWidth = parentBox.offsetWidth;
      const parentHeight = parentBox.offsetHeight;
      const childWidth = childBox.offsetWidth;
      const childHeight = childBox.offsetHeight;
      let scaleX, scaleY;
      if (parentWidth < childWidth || parentHeight < childHeight) {
        const scaleBasedOnWidth = parentWidth / childWidth;
        const scaleBasedOnHeight = parentHeight / childHeight;
        scaleX = scaleBasedOnWidth;
        scaleY = scaleBasedOnHeight;
      } else {
        scaleX = parentWidth / childWidth;
        scaleY = parentHeight / childHeight;
      }
      childBox.style.transform = `scale(${scaleX}, ${scaleY})`;
    },
    // 监听盒子变化
    listenChangeFn() {
      let that = this;
      const element = document.getElementById(`dynamic-${this.timestamp}`);
      // console.log(element, "element");
      if (element) {
        new ResizeObserver(() => {
          // 处理元素大小变化的逻辑
          that.scaleFn();
        }).observe(element);
      }
    },
    // 绑定动画样式 animate__flash
    bindAnimationFn(animateName) {
      if (animateName != null) {
        this.dynamicClassName = animateName;
      }
    },
    //定义唯一ID名
    dynamicIdName() {
      return `dynamic-${this.timestamp}`;
    },
    //定义唯一ID名
    dynamicChildName() {
      return `dynamicChild-${this.timestamp}`;
    },
  },
  mounted() {
    this.myEcharts(0);
    this.myEcharts(1);
    this.timestamp = new Date().getTime();
    this.$nextTick(() => {
      // 监听盒子变化
      this.listenChangeFn();
    });
  },
  computed: {
    //设置套系边框(根据主题切换底色边框样式) 以及设置图表背景颜色
    backgroundStyle() {
      const { hideBottomFrame, linerColor } = this.echartsConfigData;
      let styleObject = {
        "background-color": linerColor,
      };
      // 如果 hideBottomFrame 不为 true，则添加 background-image
      if (!hideBottomFrame) {
        //styleObject['background-image'] = `url("thumbnail/backImg/border-${this.$store.state.topicColor}.png")`;
      }
      return styleObject;
    },
  },
  // 销毁监听
  beforeDestroy() {
    // 组件销毁前停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    if (this.requestTime != null) {
      clearInterval(this.requestTime);
    }
  },
};
</script>
<style lang="scss" scoped>
@import "../../static/assets/common.scss";
</style>
<style lang="scss" scoped>
.scale-box {
  width: 100%;
  height: 100%;
}

.hall-role-panel {
  width: 460px;
  height: 323px;
  position: absolute;
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  background-image: url(../../../thumbnail/backImg/new-border-green.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: left top;

  .grid-charts {
    width: 100%;
    height: 100%;
  }
}

.grid-box-bd {
  display: flex;
  margin-top: 40px;
  justify-content: space-between;

  .chart_wrap {
    height: 186px;
    width: 174px;
    background: url(../../static/assets/HallRole/bg1.png) no-repeat center 3px;
    background-size: 100% 100%;

    &:last-of-type {
      background: url(../../static/assets/HallRole/bg2.png) no-repeat center 3px;
    }
  }
}
</style>
